/**
 * @description 文件上传 $column.type == 图 || 音 || 视
 */

import { useEffect, useState } from 'react';
import { Form, Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

import getRule from '../getRule';

function YyFile({ column, initialValues, disabledColumnNames, showLabel }) {

  // 当前所有文件路径
  const [fileList, setFileList] = useState([]);

  let token = localStorage.getItem('Token')

  // [1] 配置校检rules字段。column已经有rules则取，无则重新生成
  let rules = column.rules ? column.rules : getRule(column)

  // [2] 配置disabled字段
  let disabled = column.isReadonly === '是' || disabledColumnNames.includes(column.columnName)

  // 请求后端数据后，initFileList数据会更新，展示当前用户的文件
  useEffect(() => {
    let name = column.columnName
    if (initialValues && initialValues[name]) {

      /**
       * @description 
       * 文件路径三种形态：
       * 1. upload/file 的api上传文件后，后端会返回文件名字：1718586750169.png
       * 2. yonghu/session 的api，后端返回的以,拼接的字符串: upload/1718586750169.png,upload/53453454.png
       * 3. 前端读取文件路径：http://localhost:8080/nodejsx4756827/upload/1718586750169.png
       */
      // 更新初始值
      // TODO:form.setFieldsValue设置了值，但文件组件不会更新界面上的值
      let initFileList = initialValues[name].split(',').map(urlSuffix => {
        // 去掉upload/
        let fileName = urlSuffix.replace('upload/', '')
        // urlSuffix: upload/1718586750169.png
        return {
          name: fileName,
          status: 'done',
          response: {
            code: 0,
            file: fileName
          },
          // 完整路径：http://localhost:8080/nodejsx4756827/upload/1718586750169.png
          url: baseUrl + urlSuffix,
        }
      })


      setFileList(initFileList)
    } else {
      setFileList([])
    }
  }, [initialValues])

  // 点击预览按钮
  const onPreview = () => { }

  // 上传的图像有变化时，更新对应的name字段的值
  const normFile = (e) => {
    let fileUrl = []
    e.fileList.forEach(file => {
      // 上传成功-->respones后端有返回值
      if (file.response) {
        fileUrl.push('upload/' + file.response.file)
      }

    })

    // 用 , 拼接多文件（后端只能接字符串？
    return fileUrl.join(',')
  }

  const handleChange = (e) => {
    setFileList(e.fileList)
  }

  return (
    <Form.Item
      label={showLabel ? column.comments : null}
      name={column.columnName}
      getValueFromEvent={normFile}
      rules={rules}
      className='file-item'
    >
      <Upload
        accept={column.form_accept}
        listType='picture-card'
        maxCount={column.formMaxCount}
        onPreview={onPreview}
        onChange={handleChange}
        fileList={fileList}
        headers={{ Token: token }}
        disabled={disabled}
      >
        <button
          className='upload-btn'
          type="button"
          disabled={disabled}
        >
          <PlusOutlined />
          <div className='upload-text'>上传</div>
        </button>

      </Upload>
    </Form.Item>
  )
}

export default YyFile